<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="index" style="width: 800px;height: 500px;"></div>
<div id="index2" style="width: 800px;height: 500px;"></div>
</body>
<script src="{{ url_for('static', filename='js/echarts.min.js') }}"></script>
<script src="{{ url_for('static',filename='js/jquery.min.js' ) }}"></script>
<script>
    let data_xlable = [{% for i in d %}'{{ i.x_lable }}', {% endfor %}];
    let data_y = [{% for i in d %}{{ i.y }}, {% endfor %}];
    let data_x = [{% for i in d %}{{ i.x }}, {% endfor %}];

    var myChar = echarts.init(document.getElementById("index"));
    var option = {
        title: {
            show: true,
            text: "demo",
            left: "left"
        },
        tooltip: {
          trigger: 'axis',
            axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
        },
        legend: {
            data: ["one"]
        },
        xAxis: {
            data: data_xlable
        },
        yAxis: {},
        series: [{
            name: "two",
            type: 'line',
            data: data_x,
            areaStyle: {}

        }, {
            name: "one",
            type: 'bar',
            data: data_y
        }]
    };
    myChar.setOption(option);


    var data_arr = [];
    for (let i = 0; i < data_xlable.length; i++) {
        data_arr.push({
            name: data_xlable[i],
            value: data_x[i]
        });
    }
    console.log(data_arr);
    console.log(JSON.stringify(data_arr));

    var myPie = echarts.init(document.getElementById("index2"))
    var option2 = {
        title: {
            show: true,
            text: "demo",
            left: "left"
        },
        tooltip: {},
        legend: {data: ['one']},
        xAxis: {},
        yAxis: {},
        series: [{
            name: '课程内容分布',
            type: 'pie',
            data: data_arr
        }]
    };
    myPie.setOption(option2);
</script>
</html>